<template>
    <div>
        <VoSchemaForm :model="model" :schema="schema"></VoSchemaForm>
        <div>
            <pre>{{modelJson}}</pre>
        </div>
        <div class="markdown-body">
            <CodeTpl></CodeTpl>
        </div>
    </div>
</template>

<script>
import CodeTpl from '@/views/md/sf/checkbox.md';
export default {
    components: {
        CodeTpl
    },
    data() {
        return {
            model: {},
            schema: {
                properties: {
                    name1: {
                        label: '单个',
                        widget: 'checkbox',
                        ui: {
                            label: '呵呵'
                        }
                    },
                    name2: {
                        label: '属性',
                        widget: 'checkbox',
                        enum: [
                            { label: '1', value: '选项1', border: true, disabled: true },
                            { label: '2', value: '选项2', border: true },
                            { label: '3', value: '选项3', border: true },
                            { label: '4', value: '选项4', border: true }
                        ],
                        ui: {
                            min: 1,
                            max: 2
                        }
                    },
                    name3: {
                        label: '按钮模式',
                        widget: 'checkboxButton',
                        enum: [
                            { label: '1', value: '选项1' },
                            { label: '2', value: '选项2' },
                            { label: '3', value: '选项3' },
                            { label: '4', value: '选项4' }
                        ],
                        ui: {
                            textColor: '#F56C6C',
                            fill: '#67C23A'
                        }
                    },
                    name4: {
                        label: '全选',
                        widget: 'checkbox',
                        enum: [
                            { label: '1', value: '选项1' },
                            { label: '2', value: '选项2' },
                            { label: '3', value: '选项3' },
                            { label: '4', value: '选项4' }
                        ],
                        custom: {
                            checkAll: true
                        }
                    },
                    name5: {
                        label: '异步选项',
                        widget: 'checkbox',
                        enum: [],
                        asyncData(resolve) {
                            setTimeout(() => {
                                resolve([
                                    { label: '1', value: '选项1' },
                                    { label: '2', value: '选项2' },
                                    { label: '3', value: '选项3' },
                                    { label: '4', value: '选项4' }
                                ])
                            }, 2000)
                        }
                    }
                },
                ui: {
                    labelWidth: 100
                },
                row: {
                    type: 'flex',
                    style: {
                        flexFlow: 'wrap'
                    }
                },
                col: {
                    span: 12
                }
            }
        }
    },
    computed: {
        modelJson() {
            return JSON.stringify(this.model, null, 4)
        }
    }
}
</script>

<style>

</style>
